<!--
 * @description 图标组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 -->
<template>
	<view
		class="pure-icon"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<!-- 字体图标 -->
		<view
			class="pure-icon__font"
			:class="_fontClasses"
			v-if="!_isImage"
		></view>
		<!-- 图片图标 -->
		<image
			class="pure-icon__image"
			:src="name"
			:mode="mode"
			v-else
		></image>
	</view>
</template>

<!-- Options -->
<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { computed } from "vue";
	import props from "./props.js";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题
		if (_props?.theme) array.push(`pure-icon--theme pure-icon--theme-${_props.theme}`);

		// 禁用状态？
		if (_props?.disabled) array.push("pure-icon--disabled");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props?.theme) array.push(`--pure-icon-theme: ${getThemeValue(_props.theme)}`);

		return array;
	});

	// 是否是图片图标
	const _isImage = computed(() => {
		return _props.name?.includes?.("/");
	});

	// 字体图标的类名
	const _fontClasses = computed(() => {
		const array = [];

		// 是图片图标
		if (_isImage.value) return array;

		// 是内置图标
		if (_props.name?.startsWith?.("__")) {
			array.push(`pure-iconfont pure-iconfont${_props.name}`);
			return array;
		}

		// 是扩展字体图标
		array.push(_props.name);

		return array;
	});

	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}
</script>

<style scoped lang="scss">
	@import "./iconfont.css";
	@import "./style.scss";
</style>
